import Page from "@src/components/Page";
import clientInstance from "@src/services/instance";
import {
  createResource,
  createSignal,
  Show,
} from "solid-js";
import {
  BootstrapIcon,
  BsButton,
  FcCheckBox,
  FcForm,
  FcFormSubmit,
  IFormInstance,
  SolidModal,
  Table,
} from "solid-fire-controls";
import { Modal } from "bootstrap";
import PackageSourceFormPart from "./PackageSourceFormPart";
import { IPackageSourceInfo } from "@src/services/client";
import toast from "solid-toast";
import SolidSwal2 from "@src/utils/swal";

const PackageSourceList = () => {
  const loadPackageSourceList = () =>
    clientInstance.packageSource.listPackageSources().catch((err) => {
      toast.error("加载失败");
      return [];
    });

  const [packageSourceList, { mutate, refetch }] = createResource(
    loadPackageSourceList
  );

  const [form, setForm] = createSignal<IFormInstance | undefined>(undefined);
  const [modal, setModal] = createSignal<Modal | undefined>(undefined);
  const [creating, setCreating] = createSignal(false);

  const createPackageSource = () => {
    form()?.setValue({});
    modal()?.show();
  };

  const handleSubmit = (value: IPackageSourceInfo) => {
    clientInstance.packageSource
      .createPackageSource(value.name!, value.source!)
      .then(() => {
        form()?.setValue({});
        modal()?.hide();
        refetch();
      })
      .catch((err) => toast.error("创建失败"));
  };

  const handleSetEnabled = (value: IPackageSourceInfo) => {
    SolidSwal2.fire({
      title: `确定${value.isEnabled ? "禁用" : "启用"} ?`,
      icon: "question",
      showCancelButton: true,
      confirmButtonText: "确定",
      cancelButtonText: "取消",
    }).then((confirm) => {
      if (confirm) {
        clientInstance.packageSource
          .setPackageSourceEnabled(value.name!, !value.isEnabled)
          .then(refetch)
          .catch((err) => toast.error("操作失败"));
      }
    });
  };

  return (
    <Page>
      <div class="row">
        <div class="col-12 d-flex gap-1">
          <BsButton outline onclick={refetch}>
            刷新
          </BsButton>
          <BsButton outline onClick={createPackageSource}>
            增加
            <BootstrapIcon icon="plus"></BootstrapIcon>
          </BsButton>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <Table
            responsive
            datas={packageSourceList()}
            columns={[
              {
                type: "index",
              },
              {
                name: "name",
                label: "Name",
              },
              {
                name: "source",
                label: "Source",
              },
              {
                name: "isEnabled",
                label: "Enabled",
                width: 100,
                children(data, column, index) {
                  return (
                    <FcCheckBox type={"switch"} inline value={data.isEnabled}>
                      {" "}
                    </FcCheckBox>
                  );
                },
              },
              {
                label: "Operations",
                width: 200,
                children: (data, col, index) => (
                  <div class="d-flex gap-1">
                    <Show
                      when={data.isEnabled}
                      fallback={
                        <BsButton
                          size="sm"
                          onClick={() => handleSetEnabled(data)}
                        >
                          启用
                        </BsButton>
                      }
                    >
                      <BsButton
                        size="sm"
                        variant={"danger"}
                        onClick={() => handleSetEnabled(data)}
                      >
                        禁用
                      </BsButton>
                    </Show>
                  </div>
                ),
              },
            ]}
          ></Table>
        </div>
      </div>
      <SolidModal onRef={setModal} fade>
        <SolidModal.Header>
          <SolidModal.Title>创建包源</SolidModal.Title>
          <SolidModal.CloseButton></SolidModal.CloseButton>
        </SolidModal.Header>
        <SolidModal.Body>
          <FcForm onRef={setForm} onSubmit={handleSubmit}>
            <PackageSourceFormPart creating={true}></PackageSourceFormPart>

            <div class="form-item">
              <FcFormSubmit>保存</FcFormSubmit>
            </div>
          </FcForm>
        </SolidModal.Body>
      </SolidModal>
    </Page>
  );
};

export default PackageSourceList;
